import React, { useEffect } from 'react'
import { Button, Row, Col } from 'antd'
import SkillCard from './SkillCard'
import { connect } from 'umi'

type Props = {
    hero: any,
    dispatch: any
}

function AdminSkill({ hero, dispatch }: Props) {
    const { skills } = hero
    useEffect(() => {
        dispatch({ type: "hero/clear", action: "skills" })
    }, [])
    return (
        <div>
            <Button type="primary" onClick={() => {
                dispatch({ type: "hero/addSkill" })
            }}>+ 添加技能</Button>
            <Row>
                {
                    skills.map((item: any, index: number) => {
                        return <Col span={12} key={index}>
                            <SkillCard index={index} />
                        </Col>
                    })
                }
            </Row>
        </div>
    )
}


const mapStateToProps = (state: any) => {
    const { hero } = state
    return {
        hero
    }
}

export default connect(mapStateToProps)(AdminSkill)